<template>
  <div class="appbottom">
    <router-link to="/home">
      <div @click="home">
        <img :src="img1[0]" />
        <p class="app_p"><span class="app_span1">首页</span></p>
      </div>
    </router-link>
    <router-link to="/shopmallpage/shopmall">
      <div @click="mall">
        <img :src="img1[1]" />
        <p class="app_p"><span class="app_span2">商城</span></p>
      </div>
    </router-link>
    <router-link to="/bebeautifulpage/bebeautiful">
      <div @click="beautiful">
        <img :src="img1[2]" />
        <p class="app_p"><span class="app_span3">变美说</span></p>
      </div>
    </router-link>
    <router-link to="/messagelistpage/messagelist">
      <div @click="message" class="app_4">
        <p class="app_pxiao"><span class="app_spanxiao">2</span></p>
        <img :src="img1[3]" />
        <p class="app_p"><span class="app_span4">消息</span></p>
      </div>
    </router-link>
    <router-link to="/minepage/mine">
      <div @click="ismy">
        <img :src="img1[4]" />
        <p class="app_p"><span class="app_span5">我的</span></p>
      </div>
    </router-link>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from "vue";
import { watch } from "@vue/runtime-core";
import { useRouter } from "vue-router";

//图片地址
const img1 = ref([
  "/src/assets/shouye.png",
  "/src/assets/shangc.png",
  "/src/assets/mei.png",
  "/src/assets/xiaox.png",
  "/src/assets/wode.png",
]);
const img2: any = reactive([]);
//字体颜色
let colora = ref("#333333");
let colorb = ref("#333333");
let colorc = ref("#333333");
let colord = ref("#333333");
let colore = ref("#333333");
//首页
const home = () => {
  colora.value = "red";
  colorb.value = "#333333";
  colorc.value = "#333333";
  colord.value = "#333333";
  colore.value = "#333333";
  img1.value = [
    "/src/assets/shouye.png",
    "/src/assets/shangc.png",
    "/src/assets/mei.png",
    "/src/assets/xiaox.png",
    "/src/assets/wode.png",
  ];
  img1.value[0] = "/src/assets/shouyered.png";
};
//商城
const mall = () => {
  colora.value = "#333333";
  colorb.value = "red";
  colorc.value = "#333333";
  colord.value = "#333333";
  colore.value = "#333333";
  img1.value = [
    "/src/assets/shouye.png",
    "/src/assets/shangc.png",
    "/src/assets/mei.png",
    "/src/assets/xiaox.png",
    "/src/assets/wode.png",
  ];
  img1.value[1] = "/src/assets/shangcred.png";
};
//变美说
const beautiful = () => {
  colora.value = "#333333";
  colorb.value = "#333333";
  colorc.value = "red";
  colord.value = "#333333";
  colore.value = "#333333";
  img1.value = [
    "/src/assets/shouye.png",
    "/src/assets/shangc.png",
    "/src/assets/mei.png",
    "/src/assets/xiaox.png",
    "/src/assets/wode.png",
  ];
  img1.value[2] = "/src/assets/meired.png";
};
//消息
const message = () => {
  colora.value = "#333333";
  colorb.value = "#333333";
  colorc.value = "#333333";
  colord.value = "red";
  colore.value = "#333333";
  img1.value = [
    "/src/assets/shouye.png",
    "/src/assets/shangc.png",
    "/src/assets/mei.png",
    "/src/assets/xiaox.png",
    "/src/assets/wode.png",
  ];
  img1.value[3] = "/src/assets/xiaoxred.png";
};
//我的
const ismy = () => {
  colora.value = "#333333";
  colorb.value = "#333333";
  colorc.value = "#333333";
  colord.value = "#333333";
  colore.value = "red";
  img1.value = [
    "/src/assets/shouye.png",
    "/src/assets/shangc.png",
    "/src/assets/mei.png",
    "/src/assets/xiaox.png",
    "/src/assets/wode.png",
  ];
  img1.value[4] = "/src/assets/wodered.png";
};

const route = useRouter();
//获取当前路由地址
watch(
  () => route.currentRoute.value.path,
  (newVal, oldVal) => {
    console.log(newVal, oldVal);
  },
  { deep: true }
);

onMounted(() => {
  if (route.currentRoute.value.path.includes("mine")) {
    ismy();
  }
  if (route.currentRoute.value.path.includes("beautiful")) {
    beautiful();
  }
  if (route.currentRoute.value.path.includes("message")) {
    message();
  }
  if (route.currentRoute.value.path.includes("mall")) {
    mall();
  }
  if (route.currentRoute.value.path.includes("home")) {
    home();
  }
});
</script>

<style>
.app_pxiao {
  width: 15px;
  height: 16px;
  background-color: red;
  position: absolute;
  border-radius: 15px;
  margin-left: 40px;
}
.app_spanxiao {
  width: 7.05px;
  height: 16px;
}
.appbottom {
  width: 385px;
  height: 49px;
  position: fixed;
  top: 88%;
  background-color: white;
}
.appbottom div {
  width: 75px;
  height: 49px;
  float: left;
  cursor: pointer;
  text-align: center;
}
.app_4 {
  width: 75px;
  height: 49px;
  float: left;
  cursor: pointer;
  text-align: center;
  position: relative;
}
.appbottom img {
  margin-top: 5px;
}
.app_p {
  height: 16px;
  line-height: 16px;
}
.appbottom span {
  width: 24px;
  height: 16px;
  font-size: 10px;
}
.app_span1 {
  color: v-bind(colora);
}
.app_span2 {
  color: v-bind(colorb);
}
.app_span3 {
  color: v-bind(colorc);
}
.app_span4 {
  color: v-bind(colord);
}
.app_span5 {
  color: v-bind(colore);
}
</style>